<template>
	<div id="app" v-title="$route.meta">
		<!-- 页面组件 -->
		<router-view></router-view>
		<van-loading size="24px" class="loading" v-show='$root.bLoading'>加载中...</van-loading>
		<!-- 下导航栏 -->
		<van-tabbar v-model="active" active-color="#ee0a24" v-show="bFoot">
			<van-tabbar-item name="home" icon="wap-home" to="/home">首页</van-tabbar-item>
			<van-tabbar-item name="list" icon="column" to="/list">分类</van-tabbar-item>
			<van-tabbar-item name="service" icon="service" to="/service">客服</van-tabbar-item>
			<van-tabbar-item name="cart" icon="shopping-cart" to="/cart">购物车</van-tabbar-item>
			<van-tabbar-item name="user" icon="manager" to="/user">我的</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	export default {
		name: 'app',
		data() {
			return {
				active: "home", //下导航栏激活效果
				bFoot: true, //下导航栏显示条件
			}
		},
		watch: {
			// 下导航栏显示判定
			"$route.path": {
				handler: function(val) {
					if (/home|list|user|service/.test(val)) {
						this.bFoot = true;
						this.active=val.slice(1)
					}
					if (/goodsdil|login|reg|search|setting|cart/.test(val)) {
						this.bFoot = false;
					}
				},
				deep: true, //深度检测
				immediate: true //首次运行
			}
		},
		methods: {}
	};
</script>

<style scoped>
	#app {
		background-color: #f4f4f4;
	}

	.loading {
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		margin-left: -0.8rem;
	}
</style>
